<template>
    <!--面包屑-->
    <el-breadcrumb separator-icon="ArrowRight" style="margin-bottom: 50px;">
        <el-breadcrumb-item>项目管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/projectList' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item>代码质量评估</el-breadcrumb-item>
        <el-breadcrumb-item>调用图</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tagStyle">
    <el-check-tag  checked  style="margin-right: 5px;">整个项目方法关系调用图</el-check-tag>
    <el-check-tag  checked @click="toJump2">单个文件方法关系调用图</el-check-tag>
    </div>
    <!--整个项目关系调用图-->
    <div id="ProjectCall" style=" display:block;padding-right:5px;height: 500px;width: 950px;"></div>

    <el-drawer v-model="drawer" title="方法相关信息" :with-header="true">
        <el-col :span="30" class="item">方法名: {{ function_data.data.functionname }}</el-col>
        <el-col :span="30" class="item">入度: {{ function_data.data.indegree }}</el-col>
        <el-col :span="30" class="item">出度: {{ function_data.data.outdegree }}</el-col>
        <el-col :span="30" class="item">返回类型: {{ function_data.data.returntype }}</el-col>
        <el-col :span="30" class="item">圈复杂度: {{ function_data.data.cyclcomplex }}</el-col>
        <el-col :span="30" class="item">有效代码行: {{ function_data.data.executablecodeline }}</el-col>
        <el-col :span="30" class="item">文件路径: </el-col>
        <el-col class="item">{{ function_data.data.fileaddress }}</el-col>
    </el-drawer>

    <el-divider />
    <!--单个文件基本信息-->
    <div class="view-select">
        <span style="font-size: 15px;float:left;">选择文件：</span>
        <el-select v-model="function_data.getSelectlist" size="large" placeholder="请选择文件"
            style="width:400px;float:left;margin-left: 10px;">
            <el-option v-for="item in function_data.projectstructureData" :key="item.fileid" :label="item.filename"
                :value="item.fileid" @click="handlerItemClick(item)">
                <span style="float: left">{{ item.filename }}</span>
                <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;">{{ item.fileaddress }}</span>
            </el-option>
        </el-select>
    </div>
     <!--单个文件关系调用图-->
     <div id="FileCall" ref="FileCallRef" style=" display:block;padding-right:5px;height: 500px;width: 950px;"></div>

</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { reactive, computed, ref, onMounted, getCurrentInstance } from "vue";
import { getCallFunctionInfo, getProjectCallInfo,getFileCallInfo } from "../../api/http.js"
import * as echarts from 'echarts';
export default {
    name: "ProjectFunctionCall",
    setup(props) {
        const { proxy } = getCurrentInstance()
        const drawer = ref(false)  //抽屉
        const getProjectid = localStorage.getItem("projectid")
        const calldata = reactive({
            data: [
                // { name: "111", value: '节点1' },
                // { name: '211', value: '节点2' },
                // { name: '311', value: '节点3' },
                // { name: '411', value: '节点4' },
                // { name: '511', value: '节点5' },
                // { name: '611', value: '节点6' },
                // { name: '711', value: '节点7' },

            ],
            links: [
                // { source: '111', target: '211' },
                // { source: '211', target: '311' },
                // { source: '211', target: '411' },
                // { source: '211', target: '511' },
                // { source: '211', target: '611' },
            ]
        })
        const callFiledata = reactive({
            data: [],
            links: []
        })
        const function_data = reactive({
            data: {
                functionid: "",
                fileid: "",
                functionname: "",
                indegree: "",
                outdegree: "",
                returntype: "",
                cyclcomplex: "",
                executablecodeline: "",
                fileaddress: "",
            },
            projectstructureData: [],
            getSelectlist:[],
        })
        const singledata = reactive({
            projectid: getProjectid,
            fileid: "",
        })

        const FileCallRef = ref()
        const toJump2 = () =>{
            //console.log("1111")
            FileCallRef.value.scrollIntoView({behavior: 'smooth', block: 'start'});
        }

        /** 点击节点显示相关java项目方法信息 */
        const getFunctionInfo = () => {
            console.log("functionidref", functionidref)
            const requestData = {
                functionid: functionidref.value,
            }
            getCallFunctionInfo(requestData).then(response => {
                if (response.data.code === 200) { 
                const resData = response.data.data
                console.log(resData)
                function_data.data = resData
                console.log("function_data.data", function_data.data)
                }
            }).catch(error => {
                console.log(error);
            })
        }
        /** 选择单个文件后在下面显示调用图信息 */
        const handlerItemClick = (item) => {
            console.log('item =>', item.fileid)
            singledata.fileid = item.fileid
            console.log("singledata.fileid",singledata.fileid)
            getProjectSingleInfoData()

        }
        const functionidref = ref()

        /** 单个文件 */
        const getProjectSingleInfoData = ()=>{
            getFileCallInfo(singledata).then(response => {
                if (response.data.code === 200) { 
                console.log("singledata",singledata)
                const resData = response.data.data
                callFiledata.data = resData.data
                callFiledata.links = resData.links
                var myChart = echarts.init(document.getElementById('FileCall'), 'dark');
                let option = {
                    backgroundColor: '#FAFCFF',
                    color: ['#a90000',],
                    title: {
                        text: "单个文件方法关系调用图",
                        textStyle: {
                            color: "#000",
                            fontWeight: 700,
                            fontSize: 20,
                            left: "center"
                        }
                    },
                    tooltip: {
                        formatter: function (x) {
                            return x.data.value;
                        },
                    },
                    legend: [{ //图例
                        x: "right",
                        show: true,
                    }],
                    series: [{
                        type: "graph",  //表示用关系图
                        legendHoverLink: true,
                        layout: "force", //力引导布局
                        categories: [{ name: "方法" }],
                        force: {
                            repulsion: [500, 700], //节点之间的斥力因子,支持设置成数组表达斥力的范围
                            edgeLength: [10, 20],
                            layoutAnimation: true,
                            friction: 0.1, //节点的移动速度。取值范围 0 到 1。
                            edgeLength: [50, 70], //两个节点之间的距离，这个距离也会受 repulsion影响
                        },
                        symbolSize: 60,
                        itemStyle: {
                            color: '#a90000',
                            shadowColor: "#666",
                            shadowOffsetX: 1,
                            shadowOffsetY: 1,
                        },
                        roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
                        edgeSymbol: ["circle", "arrow"],
                        edgeSymbolSize: [4, 8],
                        cursor: 'pointer',
                        label: {
                            show: true, // 图形上的文本标签， 可用于说明图形的一些数据信息， 比如值， 名称等
                            fontStyle: "oblique",
                            position: "top",
                            fontSize: 12,
                            color: '#000', //如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。
                            width: 100,
                            overflow: "break", //文字超出宽度是否截断或者换行。配置width时有效
                            formatter: function (x) {
                                return x.data.value;
                            },
                        },
                        labelLayout: {
                            moveOverlap: 'shiftX', //在标签重叠的时候是否挪动标签位置以防止重叠。
                            draggable: true, //标签是否可以允许用户通过拖拽二次调整位置。
                        },
                        emphasis: {
                            scale: true, //是否开启高亮后节点的放大效果。
                            focus: 'adjacency'
                        },
                        lineStyle: {
                            color: "#666",
                            width: 2,
                            curveness: 0, //关系线的曲度，支持从 0 到 1 的值，值越大曲度越大。
                        },
                        data: callFiledata.data,
                        links: callFiledata.links,

                    },
                    ],
                };
                myChart.setOption(option);
                myChart.on('click', function (params) {
                    if (params.dataType === 'node') {
                        drawer.value = true
                        const functionid = params.data.name
                        functionidref.value = functionid
                        getFunctionInfo()
                    }
                });
            }
            }).catch(error => {
                console.log(error);
            })

        }
        onMounted(() => {
            getProjectSingleInfoData()
            const getProjectstructureData = JSON.parse(localStorage.getItem("projectstructureData"))
            //console.log("getProjectstructureData", getProjectstructureData)
            function_data.projectstructureData = getProjectstructureData
            const requestData = {
                projectid: getProjectid,
            }
            /** 整个项目 */
            getProjectCallInfo(requestData).then(response => {
                if (response.data.code === 200) { 
                const resData = response.data.data
                calldata.data = resData.data
                calldata.links = resData.links
                var myChart = echarts.init(document.getElementById('ProjectCall'), 'dark');
                let option = {
                    backgroundColor: '#FAFCFF',
                    color: ['#a90000',],
                    title: {
                        text: "整个项目方法关系调用图",
                        textStyle: {
                            color: "#000",
                            fontWeight: 700,
                            fontSize: 20,
                            left: "center"
                        }
                    },
                    tooltip: {
                        formatter: function (x) {
                            return x.data.value;
                        },
                    },
                    legend: [{ //图例
                        x: "right",
                        show: true,
                        // data: ["正义的一方", "黑暗的一方"]
                    }],
                    series: [{
                        type: "graph",  //表示用关系图
                        legendHoverLink: true,
                        layout: "force", //力引导布局
                        categories: [{ name: "方法" }],
                        // categories: [
                        //     { name: "正义的一方", symbolSize: 60 },
                        //     { name: "黑暗的一方", symbolSize: 70 },

                        // ],
                        force: {
                            repulsion: [500, 700], //节点之间的斥力因子,支持设置成数组表达斥力的范围
                            edgeLength: [10, 20],
                            layoutAnimation: true,
                            friction: 0.1, //节点的移动速度。取值范围 0 到 1。
                            edgeLength: [50, 70], //两个节点之间的距离，这个距离也会受 repulsion影响
                        },
                        symbolSize: 60,
                        itemStyle: {
                            color: '#a90000',
                            shadowColor: "#666",
                            shadowOffsetX: 1,
                            shadowOffsetY: 1,
                        },
                        roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
                        edgeSymbol: ["circle", "arrow"],
                        edgeSymbolSize: [4, 8],
                        cursor: 'pointer',
                        label: {
                            show: true, // 图形上的文本标签， 可用于说明图形的一些数据信息， 比如值， 名称等
                            fontStyle: "oblique",
                            position: "top",
                            fontSize: 12,
                            color: '#000', //如果设置为 'inherit'，则为视觉映射得到的颜色，如系列色。
                            width: 100,
                            overflow: "break", //文字超出宽度是否截断或者换行。配置width时有效
                            formatter: function (x) {
                                return x.data.value;
                            },
                        },
                        labelLayout: {
                            moveOverlap: 'shiftX', //在标签重叠的时候是否挪动标签位置以防止重叠。
                            draggable: true, //标签是否可以允许用户通过拖拽二次调整位置。
                        },
                        emphasis: {
                            scale: true, //是否开启高亮后节点的放大效果。
                            focus: 'adjacency'
                        },
                        lineStyle: {
                            color: "#666",
                            width: 2,
                            curveness: 0, //关系线的曲度，支持从 0 到 1 的值，值越大曲度越大。
                        },
                        // edgeLabel: {
                        //     show: true,
                        //     fontWeight: 800,
                        //     fontSize: 12,
                        //     color: "#000",
                        //     formatter: function(x) {
                        //         return x.data.name
                        //     },
                        // },
                        data: calldata.data,
                        links: calldata.links,

                    },
                    ],
                };
                myChart.setOption(option);
                myChart.on('click', function (params) {
                    if (params.dataType === 'node') {
                        //var dataLen = option.series[0].data;
                        //console.log(params.data.functionid)
                        //proxy.$message.success(params.name)
                        drawer.value = true
                        const functionid = params.data.name
                        functionidref.value = functionid
                        getFunctionInfo()
                    }
                });
             }
            }).catch(error => {
                console.log(error);
            })
        })

        return {
            calldata,
            callFiledata,
            drawer,
            //call_config,
            function_data,
            functionidref,
            singledata,
            getFunctionInfo,
            handlerItemClick,
            toJump2,
            FileCallRef,

        }
    }

}
</script>

<style scoped>
.item {
    margin-bottom: 10px;
    display: flex;
}
.view-select {
    width: 700px;
    height: 50px;
}
.tagStyle{
    display: flex;
    margin-bottom: 10px;
}
</style>